<!DOCTYPE html>
<html lang="en">
<head>
    <!--#include file="ssi/head.html"-->
    <meta name="keywords" content="链接生成二维码工具">
    <meta name="description" content="链接生成二维码工具">
    <title>链接生成二维码</title>
    <!--#include file="ssi/link.html"-->
</head>
<body>
    <!--#include file="ssi/nav.html"-->
    <!--#include file="ssi/top-head.html"-->
    <section class="container margin-bot-l">
      <h1 class="headline">链接生成二维码图片</h1>
      <form class="form form-horizontal custom-form-1" id="qr-form">
        <div class="form-group form-group-lg">
          <label for="imgurl" class="col-sm-2 control-label">要生成二维码的地址</label>
          <div class="col-sm-10">
            <input type="text" id="url-qr" placeholder="请输入网页的url地址" class="form-control">
          </div>
        </div>
        <button type="submit" class="btn btn-primary btn-lg single-btn">生成二维码图片</button>
      </form>
      <div class="result-img" id="qrurl-result">
        <div class="img-x"></div>
        <a class="text-x" download="download"></a>
      </div>
    </section>

    <section class="container">
      <h1 class="headline">二维码图片请求的地址</h1>
      <div class="code-pre">
        <pre><code>// 接口地址
http://api.wubin.work/tool/qrcode?size=[size]&data=[data]
[size]: (int) 生成二维码图片的尺寸 取值1-9 若不提供该参数，那么默认是5
[data]： (string) 将要生成二维码图片的有效网址链接</code></pre>
      </div>
    </section>

    <section class="container margin-bot-l">
      <h1 class="headline">前端应用到的生成二维码插件</h1>
      <h2 class="inner-title">1、QrcodeJS2</h2>
      <div class="code-pre">
        <pre><code>// npm安装用于vue/react中
npm i qrcodejs2</code></pre>
      </div>
      <h2 class="inner-title">2、jquery.qrcode.js</h2>
      <div class="code-pre">
        <pre><code>&lt;script src="https://634174214.gitee.io/mytool/js/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://634174214.gitee.io/mytool/js/jquery.qrcode.min.js"&gt;&lt;/script&gt;
</code></pre>
      </div>
    </section>

    <!--#include file="ssi/footer.html"-->

  <script>
    // 每一页都需要配置的信息
    var pageInfo = {
      toolLogo: 'img/icon-qrcode.png',
      toolName: document.title
    }
  </script>
    <!--#include file="ssi/script.html"-->
    <script src="js/pages/qrcode.js"></script>
</body>
</html>